<template>
  <div class="Home-box">
    <iframe
      id="iframe"
      style="height: 100vh; width: 100vw"
      :src="Twinurl"
      scrolling="no"
      ref="iframe"
    ></iframe>
    <!-- 前端UI -->
    <div class="Home-UI-box">
      <!-- title标题 -->
      <div class="Home-UI-top">
        <div class="Home-UI-title"></div>
        <div class="Home-UI-fanhui"></div>
      </div>
      <div class="Home-UI-dibu"></div>
      <!-- 切换站 -->
      <div class="Home-UI-SwitchTo"></div>
      <!-- 孪生运行组件 -->
      <div class="Home-UI-TwinOperation" v-if="twin.isShowactive == 1">
        <TwinOperation />
      </div>
      <!-- 孪生安全组件 -->
      <div class="Home-UI-TwinSafety" v-if="twin.isShowactive == 2">
        <TwinSafety />
      </div>
      <!-- 孪生健康 -->
      <div class="Home-UI-TwinHealth" v-if="twin.isShowactive == 3">
        <TwinHealth />
      </div>
      <!-- 摄像头组件 -->
      <div class="Home-UI-Camera"></div>
      <!-- AI巡检 -->
      <div class="Home-UI-Inspection"></div>
      <!-- 语音播报 -->
      <div class="Home-UI-Broadcast"></div>

      <!-- 孪生运行等按钮 -->
      <div class="Home-UI-buttonbox">
        <div
          class="UI-buttonbox-yunxing"
          :class="
            twin.isShowactive == 1
              ? 'UI-buttonbox-yunxingG'
              : 'UI-buttonbox-yunxing'
          "
          @click="addActive(1)"
        ></div>
        <div
          class="UI-buttonbox-anquan"
          :class="
            twin.isShowactive == 2
              ? 'UI-buttonbox-anquanG'
              : 'UI-buttonbox-anquan'
          "
          @click="addActive(2)"
        ></div>
        <div
          class="UI-buttonbox-jiankang"
          :class="
            twin.isShowactive == 3
              ? 'UI-buttonbox-jiankangG'
              : 'UI-buttonbox-jiankang'
          "
          @click="addActive(3)"
        ></div>
        <div
          class="UI-buttonbox-jiankong"
          :class="
            twin.isShowactive == 4
              ? 'UI-buttonbox-jiankongG'
              : 'UI-buttonbox-jiankong'
          "
          @click="addActive(4)"
        ></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import TwinOperation from "@/components/TwinOperation.vue"
import userStore from "@/store/index.js"
const { twin } = userStore()
import TwinSafety from "@/components/TwinSafety.vue"
import TwinHealth from "@/components/TwinHealth.vue"
const Twinurl = ref(window.streamingConfig.Twinurl)

const addActive = (e) => {
  if (e == 1) {
    // 孪生运行
    twin.updateActive(e)
  }
  if (e == 2) {
    // 孪生安全
    twin.updateActive(e)
  }
  if (e == 3) {
    // 孪生健康
    twin.updateActive(e)
  }
  if (e == 4) {
    // 设备监视
    twin.updateActive(e)
  }
}
</script>
<style scoped lang="less">
.Home-box {
  height: 100%;
  // overflow-x: hidden;
  // overflow-y: hidden;
  #iframe {
    z-index: -10;
    position: absolute;
    bottom: 0;
    border: 0;
  }
  .Home-UI-box {
    z-index: 100px;
    box-sizing: border-box;
    background-color: red;
    .Home-UI-top {
      position: relative;
      .Home-UI-title {
        width: 100%;
        height: 76px;
        background: url("@/assets/title/toubu.png") no-repeat center;
        background-size: 100% 100%;
      }
      .Home-UI-fanhui {
        cursor: pointer;
        width: 29px;
        height: 20px;
        position: absolute;
        left: 20px;
        top: 20px;
        background-color: pink;
      }
    }
    .Home-UI-dibu {
      position: absolute;
      width: 100%;
      height: 35px;
      bottom: 0px;
      background: url("@/assets/title/dibu.png") no-repeat center;
      background-size: 100% 100%;
    }
    .Home-UI-SwitchTo {
      position: absolute;
      top: 68px;
      width: 488px;
      height: 29px;
      background-color: pink;
      margin-left: 20px;
    }
    .Home-UI-TwinOperation {
      position: absolute;
      top: 105px;
      width: 488px;
      height: 500px;
      margin-left: 20px;
    }
    .Home-UI-TwinSafety {
      position: absolute;
      top: 105px;
      width: 488px;
      height: 500px;
      margin-left: 20px;
    }
    .Home-UI-TwinHealth {
      position: absolute;
      top: 105px;
      width: 488px;
      height: 500px;
      margin-left: 20px;
    }
    .Home-UI-Camera {
      position: absolute;
      width: 326px;
      height: 203px;
      top: 826px;
      left: 20px;
      background-color: pink;
    }
    .Home-UI-Inspection {
      position: absolute;
      width: 137px;
      height: 48px;
      right: 20px;
      bottom: 98px;
      background-color: pink;
    }
    .Home-UI-Broadcast {
      position: absolute;
      width: 508px;
      height: 38px;
      right: 20px;
      bottom: 44px;
      background-color: pink;
    }
    .Home-UI-buttonbox {
      position: absolute;
      width: 690px;
      height: 50px;
      // background-color: red;
      left: 50%;
      bottom: 40px;
      transform: translate(-50%);
      display: flex;
      justify-content: space-between;
      // 运行==================================
      .UI-buttonbox-yunxing {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshengyunxing_pt.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-yunxingG {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshengyunxing_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-yunxing:hover {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshengyunxing_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      // 安全==================================
      .UI-buttonbox-anquan {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshenganquan_pt.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-anquan:hover {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshenganquan_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-anquanG {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshenganquan_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      // 健康 ===================================================
      .UI-buttonbox-jiankang {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshengjiankang_pt.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-jiankang:hover {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/luanshengjiankang.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-jiankangG {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/luanshengjiankang.png") no-repeat;
        background-size: 100% 100%;
      }
      // 监控 ======================================
      .UI-buttonbox-jiankong {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_shebeijianshi_pt.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-jiankong:hover {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_shebeijianshi_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-jiankongG {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_shebeijianshi_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
